@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:where([class^="ri-"])::before { content: "\f3c2"; }
.nav-link.active { color: #ffce00; border-bottom: 2px solid #ffce00; }
.destination-card:hover .overlay { opacity: 1; }
.language-selector:hover .language-dropdown { display: block; }

.separator {
width: 180px;
height: 4px;
background-color: #ffce00;
margin: 0 auto 10px;
border-radius: 2px;
}

html, body {
  font-family: 'roboto';
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
:root {
  --primary: #ffce00;
  --primary-light: #cfb446;
  --text-dark: #000000;
  --text-light: #faf6f6;
  --bg-light: #f8f9fa;
  --primary-color: #ffce00;
  --color:#056839;
  --secondary-color: #d62828;
  --secondary-light: #f0c75e;
  --accent-color: #3a7d44;
  --dark-color: #1a1a1a;
  --light-color: #f8f9fa;
  --text-color: #333333;
  --primary-light: #cfb446;
  --text-dark: #000000;
  --white: #056839;
  --shadow: 0 4px 20px rgba(2, 2, 2, 0.18);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 50px;
  --border-color: #dee2e6;
  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ribbon-wildlife: #3B82F6;
  --ribbon-safari: #10B981;
  --ribbon-water: #06B6D4;
  --ribbon-adventure: #F59E0B;
  --ribbon-cultural: #8B5CF6;
  --transition-speed: 2s;
  --transition-speeds: 0.5s;
  }

  header {
    background: rgba(29, 60, 38, 0.95); /* Black with 10% opacity */
    transition: background-color 0.3s ease;
  }

  .nav-link {
    position: relative;
    padding: 0.5rem 0;
    color: #fff;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #ffce00;
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-link:hover::after {
    width: 100%;
    animation: growLine 0.4s ease forwards;
}

.nav-link:hover {
    color: #ffce00 !important;
}

.nav-item {
  position: relative;
  flex: 1;
  text-align: center;
}


.nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: center;
  flex: 4;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffce00;
}


 /* Exit Intent Modal Styles */
        .exit-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.92);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.4s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-contents {
            width: 90%;
            max-width: 500px;
            max-height: 750px;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
        }
        
        @keyframes slideUp {
            from { transform: translateY(60px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .modal-headers {
            background: linear-gradient(135deg, #056839 0%, #034627 100%);
            color: white;
            padding: 20px 15px 10px;
            text-align: center;
            position: relative;
        }
        
        .modal-close {
            position: absolute;
            top: 20px;
            right: 25px;
            font-size: 28px;
            cursor: pointer;
            transition: transform 0.2s;
            color: #ffce00;
            font-weight: bold;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .modal-close:hover {
            transform: scale(1.2);
            transform: rotateX('360');
        }
        
        .modal-body {
            padding: 40px 35px;
            text-align: center;
            line-height: 1.6;
            background: white;
        }
        
        .modal-title {
            color: #f4f8f6;
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
        }
        
        .modal-title:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 5px;
            background: #ffce00;
            border-radius: 3px;
        }
        
        .modal-text {
            color: #333;
            font-size: 19px;
            margin: 30px 0;
            line-height: 1.8;
        }
        
        .modal-text strong {
            color: #056839;
            font-weight: 700;
        }
        
        .cta-button {
            background: #ffce00;
            color: #056839;
            border: none;
            border-radius: 50px;
            padding: 20px 50px;
            font-size: 20px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 18px rgba(255, 206, 0, 0.4);
            position: relative;
            overflow: hidden;
            letter-spacing: 0.5px;
            margin-top: 20px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .cta-button:hover {
            background: #e6b900;
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(255, 206, 0, 0.5);
        }
        
        .cta-button:active {
            transform: translateY(2px);
        }
        
        .happiness-highlight {
            background: linear-gradient(to right, #ffce00, #ffde5e);
            color: #056839;
            padding: 25px 30px;
            border-radius: 15px;
            margin: 30px 0;
            font-weight: 700;
            font-size: 22px;
            line-height: 1.5;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border: 3px solid rgba(255, 255, 255, 0.5);
        }
        
        .happy-icon {
            display: flex;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .happy-icon div {
            width: 100px;
            height: 100px;
            background: #ffce00;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
            color: #056839;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }



.destination-panel {
  position: absolute;
  margin-top: 35%;
  background: white;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  width: 900px;
  margin-left: 103%;
  transform: translateX(-50%) translateY(-10px);
  padding: 20px;
     
}

/* Full width for Uganda panel */
.nav-item:first-child .destination-panel {
  width: 100vw;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  border-radius: 0;
  padding: 30px 20px;
  height: 620px;
}

.nav-item:hover .destination-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-item:last-child .destination-panel{
  margin-left: -100%;
}

.panel-content {
  display: flex;
  align-items: stretch;
}

.safari-links {
  flex: 1;
  padding: 15px;
  background: white;
}

.destination-title {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 25px;
  font-weight: 700;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
}

.destination-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 60%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: #27ae60;
}

.expedition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* For Uganda - 3 columns */
.nav-item:first-child .expedition-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* For other countries - 2 columns */
.nav-item:not(:first-child) .expedition-grid {
  grid-template-columns: repeat(2, 1fr);
}

.safari-link {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: white;
  border: 1px solid #eaeaea;
  position: relative;
  overflow: hidden;
}

.safari-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  border-color: #d5e8d4;
  background: #f9fdf9;
}

.safari-link:hover .journey-name {
  color: #27ae60;
}

.journey-name {
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.95rem;
  margin-bottom: 8px;
  margin-left: -20%;
  line-height: 1.4;
}

.duration-badge {
  display: inline-block;
  background: #27ae60;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  position: absolute;
  top: 10px;
  right: 5px;
}

.adventure-visual {
  flex: 0 0 250px;
  background: linear-gradient(135deg, #27ae60 0%, #2c3e50 100%);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  padding: 20px;
}

.adventure-visual h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.adventure-visual p {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.4;
}



/* Target the header language selector */
.language-selector .language-dropdown {
  min-width: 220px;
  max-width: 280px;
}

.language-selector .language-option {
  padding-left: 20px;
  padding-right: 20px;
}

/* Add to your CSS file */
.language-dropdown {
  max-height: 300px; /* Adjust based on your needs */
  overflow-y: auto; /* Enable vertical scrolling */
  width: 520px; /* Adjust width as needed */
  border-radius: 8px;
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #e5e7eb #f5f5f5; /* For Firefox */
}

/* Style scrollbar for Webkit browsers */
.language-dropdown::-webkit-scrollbar {
  width: 5px;
}

.language-dropdown::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

.language-dropdown::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 10px;
  border: 2px solid #f5f5f5;
}

/* Ensure proper positioning */
.translation-button {
  position: relative;
  z-index: 1000;
}
    
    .language-option {
      padding: 8px 12px;
      cursor: pointer;
      text-align: left;
      border: none;
      background: none;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .language-option:hover {
      background-color: #f5f5f5;
    }
    
    .flag-icon {
      width: 24px;
      height: 18px;
      display: inline-block;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    
    /* Language icon SVG styling */
    .language-icon {
      width: 24px;
      height: 24px;
      fill: white;
    }
    
    /* Hide Google Translate widget */
    .skiptranslate {
      display: none !important;
    }
    body {
      top: 0 !important;
    }

    /* Positioning for the button - can be moved anywhere */
    .translation-container {
      position: fixed;
      bottom: 300px;
      right: 20px;
      z-index: 1000;
    }

    .notranslate {
      transform: none !important;
    }

    header {
      margin-top: 40px;
    }


/* Info strip styles */

.info-strip-container {
  position: fixed;
  top: 0; /* Stick to top */
  left: 0; /* Stick to left */
  width: 100%; /* Full width */
  height: 50px;
  z-index: 999; 
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
}
  
  .info-strip {
      top: -10px;
      background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
      color: var(--light-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      animation: fadeIn 1s ease-in;
      position: relative;
      z-index: 1;
  }
  

  
  .contact-details, .social-media {
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;
  }
  
  .contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
      transition: transform var(--transition-speed);
      padding: 4px 0;
  }
  
  .contact-item:hover {
      transform: translateY(-2px);
  }
  
  .contact-item i {
      color: var(--primary-color);
      animation: pulse 1s infinite alternate;
  }
  
  .phone-number {
      position: relative;
      transition: color var(--transition-speed);
  }
  
  .phone-number:hover {
      color: var(--primary-color);
      animation: glow 1.5s infinite alternate;
  }
  
  .social-icons-container {
      display: flex;
      gap: 15px;
      background: rgba(255, 255, 255, 0.1);
      padding: 5px 15px;
      border-radius: 20px;
      backdrop-filter: blur(5px);
  }
  
  .social-icon {
      color: var(--accent-color);
      font-size: 16px;
      transition: all var(--transition-speed);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
  }
  
  .social-icon:hover {
      transform: scale(1.3) rotate(5deg);
      color: var(--light-color);
  }
  
  .social-icon:hover::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(255, 215, 0, 0.2);
      animation: ripple 1s infinite;
  }
  
  /* Animations */
  @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes glow {
      from { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
      to { text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5); }
  }
  
  @keyframes floatAcross {
      0% { transform: translateX(0) rotate(0deg); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateX(calc(100vw + 100px)) rotate(20deg); opacity: 0; }
  }
  
  @keyframes pulse {
      from { transform: scale(1); }
      to { transform: scale(1.2); }
  }
  
  @keyframes ripple {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(2); opacity: 0; }
  }
  
  @keyframes moveBg {
      from { background-position: 0 0; }
      to { background-position: 400px 0; }
  }
  
      /* Responsive adjustments */
      @media (max-width: 1023px) {
        /* Hide info strip on tablets and mobile */
        .info-strip-container {
          display: none;
        }
        
        /* Adjust header top position when info strip is hidden */
        header {
          top: 0;
        }
      }
      
      @media (min-width: 1024px) {
        /* Show info strip on desktop */
        .info-strip-container {
          display: block;
        }
        
        /* Adjust header position to account for info strip */
        header {
          top: 10px; /* Height of info strip */
        }
      }
      
      /* Mobile menu button styling */
      #mobileMenuButton {
        display: none;
        background: transparent;
        border: none;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
      }
      
      @media (max-width: 767px) {
        header{
          top: -50px;
        }

        nav{
          top: 50px;
        }

        #mobileMenuButton {
          display: block;
        }
      }




  /* Mobile Menu Styles */
  .mobile-menu {
    transition: transform 0.3s ease-in-out;
  }
  
  /* Prevent scrolling when menu is open */
  body.menu-open {
    overflow: hidden;
  }
  
  /* Mobile menu link hover effects */
  .mobile-menu a:hover {
    color:#056839; /* primary color */
  }
  
  /* Submenu animation */
  .mobile-menu .relative.group div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .mobile-menu .relative.group:hover div,
  .mobile-menu .relative.group:focus-within div {
    max-height: 500px;
  }

    /* Mobile Menu Styles */
    #mobileMenu {
      will-change: transform;
    }
    
    /* Prevent scrolling when menu is open */
    body.menu-open {
      overflow: hidden;
    }
    
    /* Smooth transitions */
    #mobileMenu, #mobileDestinationsMenu {
      transition: all 0.3s ease-in-out;
    }
    
    /* Mobile menu links */
    #mobileMenu a {
      transition: color 0.2s ease;
      display: block;
      padding: 0.5rem 0;
    }
    
    /* Dropdown arrow transition */
    #mobileDestinationsButton i {
      transition: transform 0.2s ease;
    }



/* Floating CTA button */
.floating-cta {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Enhanced Mega Menu Styles */
.mega-menu {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(10px);
}

.group:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-container {
  position: absolute;
  top: 20px;
  left: 60%;
  transform: translateX(-60%);
  width: 100vw;
  max-width: 1200px;
  background: white;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: 0 0 12px 12px;
  padding: 2rem;
  z-index: 50;
  border-top: 3px solid#056839;
}

.mega-menu-column {
  transition: transform 0.3s ease;
}

.mega-menu-column:hover {
  transform: translateY(-5px);
}

.mega-menu-link {
  transition: all 0.2s ease;
  border-radius: 6px;
}

.mega-menu-link:hover {
  background-color: #f7fafc;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mega-menu-footer {
  background: linear-gradient(to right, #f7fafc, #fff);
  border-top: 1px solid #e2e8f0;
}

/* Language Selector */
.language-selector {
  position: relative;
  z-index: 50;
  color: #fff;
}

.language-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 140px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.language-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-option {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}

.language-option:hover {
  background: #f5f5f5;
}


  /* Enhanced hover effects for destination cards */
  .destination-grid {
    perspective: 1000px;
  }
  
  .destination-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  /* First card (Bwindi Forest) - 3D Lift Effect */
  .destination-card:first-child:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  }
  
  /* Second card (Queen Elizabeth Park) - Tilt Effect */
  .destination-card:nth-child(2):hover {
    transform: perspective(1000px) rotateY(10deg) rotateX(-5deg) scale(1.03);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  }
  
  /* Third card (Murchison Falls) - Zoom Effect */
  .destination-card:nth-child(3):hover img {
    transform: scale(1.15);
  }
  
  /* Fourth card (Kibale Forest) - Glow & Float Effect */
  .destination-card:nth-child(4):hover {
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(255,206,0,0.7);
  }
  
  /* Fifth card (Rwenzori Mountains) - Slide Up Content */
  .destination-card:nth-child(5):hover .card-content {
    transform: translateY(-30px);
  }
  
  /* Common Image Styles */
  .destination-card img {
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), 
                filter 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .destination-card:hover img {
    filter: brightness(1.05);
  }
  
  /* Card Content Styling */
  .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: white;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  
  /* Special Effect for Bwindi Card */
  .destination-card:first-child .card-content {
    transform: translateY(100%);
    opacity: 0;
    background: rgba(0,0,0,0.7);
    padding-top: 2rem;
  }
  
  .destination-card:first-child:hover .card-content {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Special Effect for Queen Elizabeth Card */
  .destination-card:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(44, 82, 130, 0.4), rgba(255, 206, 0, 0.2));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
  }
  
  .destination-card:nth-child(2):hover::before {
    opacity: 1;
  }
  
  .destination-card:nth-child(2) .card-content {
    z-index: 2;
  }
  
  /* Special Effect for Murchison Falls Card */
  .destination-card:nth-child(3) .card-content {
    background: rgba(0,0,0,0.7);
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0% 100%);
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
  }
  
  /* Special Effect for Kibale Forest Card */
  .destination-card:nth-child(4)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(255, 206, 0, 0);
    border-radius: 8px;
    transition: all 0.5s ease;
  }
  
  .destination-card:nth-child(4):hover::after {
    border: 2px solid rgba(255, 206, 0, 0.8);
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }

  /* gorilla card slider */
  .gorilla-slider {
    perspective: 1000px;
  }
  .slide {
    transition: opacity 1s ease-in-out;
  }
  .slide.active {
    opacity: 1;
    z-index: 1;
  }





/* Section fade-in animations */
.section-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay classes for staggered animations */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Card fade-in */
/* Destination Cards */
.destination-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.destination-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure consistent image sizing */
.destination-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Card content styling */
.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  color: white;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Gorilla Slider */
.gorilla-slider {
  position: relative;
  height: 100%;
  width: 100%;
}

.gorilla-slider .slide {
  position: absolute;
  inset: 0;
  transition: opacity 1s ease-in-out;
}

.gorilla-slider .slide.active {
  opacity: 1;
  z-index: 1;
}

/* Testimonial Slider */

.testimonial-slider {
  perspective: 1000px;
  overflow: hidden;
  position: relative;
}

.testimonial-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 1;
}

.testimonial-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure slider controls are above cards */
.slider-prev, .slider-next {
  
  z-index: 10;
  transition: all 0.3s ease;
}

.slider-prev:hover, .slider-next:hover {
  transform: translateY(-50%) scale(1.1);
}


    /* Safari Hero Section */
    .hero-section {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      height: auto;
      padding: 60px 20px;
    }
    
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      overflow: hidden;
    }
    
    
    .video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);
      z-index: 1000;
    }
    
    /* Mobile Responsiveness */
    @media (max-width: 768px) {
      .video-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    /* Animation */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .video-slide.active video {
      animation: fadeIn 1s ease-in-out;
    }


    /* Main Container */
    .main-container {
      max-width: 1800px;
      width: 100%;
      background: rgba(250, 252, 250, 0.2);
      backdrop-filter: blur(20px);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-top: 2%;
      padding: 30px;
      position: relative;
      z-index: 10;
      margin-top: 4%;
    }

    /* Hero Content */
    .hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
    }

    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero h1 {
      font-size: 42px;
      line-height: 1.2;
      margin-bottom: 20px;
      font-weight: 700;
      color: #ffff;
    }

    .hero h1 .highlight {
      color: #ffce00;
      font-family: 'Pacifico', cursive;
    }

    .hero p {
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 30px;
      font-size: 16px;
    }

    /* Dropdown Container Styling */
.search-item {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-item label {
  display: block;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Custom Dropdown Styling */
.search-item select {
  width: 100%;
  padding: 10px 35px 10px 15px;
  border: none;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-dark);
  font-size: 1rem;
  appearance: none;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
}

.search-item #date{
  width: 80%;
}

.search-item select:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.search-item select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-light);
  background-color: rgba(255, 255, 255, 0.2);
}



/* Dropdown Options Styling */
.search-item select option {
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-dark);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.search-item select option:hover {
  background: var(--primary-light) !important;
  color: white;
}

.search-item select option:checked {
  background: var(--primary);
  color: white;
  font-weight: 500;
}

/* Date Input Styling */
.search-item input[type="date"] {
  color: var(--text-dark);
  font-family: inherit;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
}

.search-item input[type="date"]:hover {
  background: rgba(255, 255, 255, 0.15);
}

.search-item input[type="date"]:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 2px var(--primary-light);
}

/* Placeholder Text Styling */
.search-item ::placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  font-size: 0.95em;
}

/* Number Input Styling */
.search-item input[type="number"]::-webkit-inner-spin-button,
.search-item input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Text Animation */
.search-item label {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.3s ease;
}

.search-item:focus-within label {
  transform: translateY(-3px);
  opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .search-item select {
    font-size: 0.9rem;
    padding: 8px 30px 8px 12px;
  }
  
  .search-item::after {
    right: 15px;
    font-size: 1rem;
  }
  
  .search-item label {
    font-size: 0.8rem;
  }
}

    /* Search Form - Updated Design */
    .search-bar {
      display: flex;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(20px);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 40px;
    }

    .search-item {
      flex: 1;
      padding: 15px 20px;
      border-right: 2px solid #eee;
      position: relative;
    }

    .search-item:last-child {
      border-right: none;
    }

    .search-item label {
      display: block;
      font-size: 20px;
      font-weight: 600;
      color: var(--text-light);
      margin-bottom: 5px;
      margin-left: 10px;
    }

    .search-item input, 
    .search-item select {
      border: none;
      width: 100%;
      font-size: 14px;
      color: var(--text-dark);
      background: transparent;
      outline: none;
    }

    .search-button {
      background-color: #056839;
      color: white;
      border: none;
      padding: 0 25px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .search-button:hover {
      background-color: var(--primary-light);
    }

    .search-button i {
      font-size: 18px;
    }

    /* Image grid */
    .image-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(2, 1fr);
      gap: 15px;
      height: 100%;
    }

    .grid-item {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      height: 100%;
      border: 2px solid #ffff;
    }

    .grid-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }

    .grid-item:hover img {
      transform: scale(1.05);
    }

    .grid-item:first-child {
      grid-row: span 2;
    }

    .badges {
      position: absolute;
      top: 15px;
      right: 15px;
      background-color: white;
      color: var(--text-dark);
      font-size: 12px;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .badges i {
      color: var(--primary);
      font-size: 14px;
    }

    /* Features section */
    .features {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      flex-wrap: wrap;
      gap: 20px;
    }

    .feature {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #a3a7a5;
      backdrop-filter: blur(20px);
      padding: 10px 20px;
      border-radius: var(--radius-lg);
    }

    .feature-icon {
      width: 40px;
      height: 40px;
      background-color: #ffce00;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature-icon i {
      font-size: 20px;
      color: white;
    }

    .feature-text {
      font-size: 18px;
      color: #056839;
      font-weight: 500;
    }

/* Mobile/Tablet Responsive Design */
@media (max-width: 1024px) {
  /* Hero Section */
  .hero {
    grid-template-columns: 1fr !important;
    padding: 20px;
    gap: 25px;
  }

  .hero h1 {
    font-size: 2.2rem;
    line-height: 1.3;
  }

  .hero p {
    font-size: 1rem;
    margin-bottom: 25px;
  }

  /* Search Bar */
  .search-bar {
    flex-direction: column !important;
    gap: 15px;
    padding: 20px;
    border-radius: 15px;
  }

  .search-item {
    width: 100%;
    border-right: none !important;
    padding: 0;
  }

  .search-item select,
  .search-item input {
    font-size: 1rem;
    padding: 12px;
    border-radius: 8px;
  }

  .search-button {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: transform 0.2s;
  }

  .search-button:hover {
    transform: scale(1.02);
  }

  /* Image Grid */
  .image-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
  }

  .grid-item:first-child {
    grid-row: auto !important;
    height: 200px;
  }

  .grid-item img {
    height: 100%;
    object-position: center;
  }

  /* Features Section */
  .features {
    flex-direction: column !important;
    align-items: center;
    gap: 15px;
    padding: 20px;
  }

  .feature {
    width: 100%;
    flex: none !important;
    padding: 15px;
    border-radius: 10px;
  }

  .feature-icon {
    width: 35px;
    height: 35px;
  }

  .feature-text {
    font-size: 1rem;
  }
}

/* Tablet-Specific Adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero h1 {
    font-size: 2.8rem;
  }

  .search-bar {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 15px;
  }

  .search-item {
    flex: 1 1 calc(50% - 8px);
  }

  .search-button {
    flex: 1 1 100%;
    max-width: 200px;
  }

  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .feature {
    flex: 1 1 calc(50% - 10px);
  }
}

/* Mobile-Specific Adjustments */
@media (max-width: 767px) {
  .hero {
    padding: 15px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .search-item {
    margin-bottom: 10px;
  }

  .search-item select,
  .search-item input {
    font-size: 0.95rem;
    padding: 10px;
  }

  .image-grid {
    grid-template-columns: 1fr;
  }

  .grid-item:first-child {
    height: 250px;
  }

  .badges {
    font-size: 11px;
    padding: 4px 8px;
  }

  .features {
    padding: 15px;
  }
}
/* Subtle Falling Leaves Animation */
.leaves-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* Below content but above background */
  overflow: hidden;
}

.leaf {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.4; /* Reduced from 0.9 */
  z-index: -1;
  animation-name: falling;
  animation-timing-function: ease-in-out; /* Smoother movement */
  animation-iteration-count: infinite;
}

@keyframes falling {
  0% {
    transform: translate(var(--start-x), -10%) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.9; /* Peak opacity */
  }
  100% {
    transform: translate(var(--end-x), 100vh) rotate(360deg); /* Reduced rotation */
    opacity: 0;
  }
}

/* More subtle leaf styles */
.leaf-1 {
  background-image: url('https://www.pngplay.com/wp-content/uploads/15/Autumn-Yellowish-Leaf-Transparent-Image.png');
  width: 40px;
  height: 40px;
}

.leaf-2 {
  background-image: url('/img/Purple-Zinnia-Flower-PNG.png');
  width: 42px;
  height: 42px;
}

.leaf-3 {
  background-image: url('https://png.pngtree.com/png-clipart/20230427/original/pngtree-tropical-leaves-frame-free-psd-design-images-png-image_9117050.png');
  width: 38px;
  height: 38px;
}


/* Counting animation styles */
.count-up {
  display: inline-block;
  min-width: 60px; /* Prevent layout shift */
}

.count-up.animate {
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Marquee Animation Styles */
.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap, 2rem);
    mask-image: linear-gradient(
      to right,
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0)
    );
    -webkit-mask-image: linear-gradient(
      to right,
      hsl(0 0% 0% / 0),
      hsl(0 0% 0% / 1) 20%,
      hsl(0 0% 0% / 1) 80%,
      hsl(0 0% 0% / 0)
    );
  }

  .marquee__group {
    height: 150px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap, 2rem);
    min-width: 100%;
    animation: scroll-x var(--duration, 60s) linear infinite;
  }

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: -3s;
}

        .marquee:hover .marquee__group {
            animation-play-state: paused;
        }
          @media (prefers-reduced-motion: reduce) {
            .marquee__group {
              animation-play-state: paused;
            }
          }
  

  @keyframes scroll-x {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  /* Marquee item styling */
  .marquee-item {
    filter: grayscale(30%);
    transition: all 0.3s ease;
    padding: 0.5rem;
  }

  .marquee-item:hover {
    filter: grayscale(100%) drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    transform: scale(1.05);
  }

  /* Airplane animation styles */
  .airplane-journey {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Changed to -1 to put it behind all content */
    overflow: hidden;
    opacity: 0.7; /* Make it slightly transparent */
  }
  
  .path-svg {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .dotted-path {
    fill: none;
    stroke:#2C5282;
    stroke-width: 2;
    stroke-dasharray: 5,5;
    opacity: 0.5; /* Make path more subtle */
  }
  
  .airplane {
    position: absolute;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    animation: fly 15s linear infinite;
  }
  
  @keyframes fly {
    0% {
      left: -5%;
      top: 10%;
      transform: translate(-50%, -50%) rotate(0deg);
    }
    25% {
      left: 25%;
      top: 30%;
      transform: translate(-50%, -50%) rotate(15deg);
    }
    50% {
      left: 55%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
    }
    75% {
      left: 85%;
      top: 30%;
      transform: translate(-50%, -50%) rotate(-15deg);
    }
    100% {
      left: 105%;
      top: 10%;
      transform: translate(-50%, -50%) rotate(0deg);
    }
  }
  
  /* Add this to make the airplane follow the curve more precisely */
  .airplane svg {
    animation: bounce 2s ease-in-out infinite;
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-5px) rotate(2deg);
    }
  }

  /* Ensure content has a solid background to make airplane visible behind */
  .bg-white {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent to show airplane */
  }
/* clouds  */
  .cloud {
  position: absolute;
  width: 120px;
  height: 70px;
  background: rgb(89, 170, 224);
  border-radius: 50px;
  opacity: 1;
  filter: blur(5px);
}
.cloud:before, .cloud:after {
  content: '';
  position: absolute;
  background:  rgb(89, 170, 224);
  border-radius: 50%;
}
.cloud:before {
  width: 45px; height: 35px;
  top: -15px; left: 20px;
}
.cloud:after {
  width: 35px; height: 35px;
  top: -12px; right: 30px;
}


@media (min-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
  
  body {
    position: relative;
  }
  
  /* Fix for any rogue horizontal lines */
  .unwanted-line {
    display: none !important;
  }
  
  /* Container constraints */
  .containers {
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
  
  /* Prevent elements from bleeding out */
  .section-fade, .hero-section, header, footer {
    max-width: 100%;
  }
}

    /* Responsive styles */
    @media (max-width: 1024px) {
      .main-container {
        padding: 30px;
      }
      
      .hero {
        gap: 30px;
      }
      
      .hero h1 {
        font-size: 36px;
      }
      
      .features {
        flex-wrap: wrap;
        gap: 20px;
      }
    }

    @media (max-width: 768px) {
      .hero {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      
      .image-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
      }
      
      .grid-item:first-child {
        grid-row: span 1;
        height: 400px;
      }
      
      .grid-item {
        height: 250px;
      }

      .search-bar {
        flex-direction: column;
        background: transparent;
      }
      
      .search-item {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 15px 0;
      }
      
      .search-item #date {
        width: 100%;
      }

      .hero h1 {
        font-size: 32px;
        text-align: center;
      }
      
      .hero p {
        text-align: center;
        font-size: 14px;
      }
      
      .feature-text {
        font-size: 14px;
      }
    }


    @media (max-width: 480px) {
      .main-container {
        padding: 20px;
        margin-top: 10%;
      }
      
      .hero h1 {
        font-size: 28px;
      }
      
      .search-button {
        padding: 15px;
        width: 100%;
      }
      
      .grid-item:first-child {
        height: 300px;
      }
      
      .grid-item {
        height: 200px;
      }
      
      .features {
        gap: 15px;
        justify-content: center;
      }
      
      .feature {
        padding: 8px 15px;
      }

      .search-item select,
      .search-item input {
        padding: 12px 15px;
        font-size: 16px;
      }

      .grid-item img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    /* features section */

    .ribon {
      --f: 0.5em;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      position: absolute;
      position: absolute;
  top: 0;
  left: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
      z-index: 20;
      background-color: var(--ribbon-wildlife);
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }



    /* Color Variations */
    .ribon.ribbon-safari { background-color: var(--ribbon-safari); }
    .ribon.ribbon-water { background-color: var(--ribbon-water); }
    .ribon.ribbon-adventure { background-color: var(--ribbon-adventure); }
    .ribon.ribbon-cultural { background-color: var(--ribbon-cultural); }

    /* Mobile Adjustment */
    @media (max-width: 768px) {
      .ribon {
        font-size: 14px;
        --f: 0.4em;
        left: 1px;
        top: 1px;
        transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
      }
    }

    /* Tour Button Styles */
    .tour-button {
      padding: 8px 24px;
      font-size: 18px;
      font-weight: 600;
      border-radius: 9999px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      border: none;
      color: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background: var(--ribbon-wildlife);
    }

    .tour-button[data-category="safari"] { background: var(--ribbon-safari); }
    .tour-button[data-category="water"] { background: var(--ribbon-water); }
    .tour-button[data-category="adventure"] { background: var(--ribbon-adventure); }
    .tour-button[data-category="cultural"] { background: var(--ribbon-cultural); }

    .tour-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
      filter: brightness(1.1);
    }

    .tour-button:active {
      transform: translateY(0);
      filter: brightness(0.95);
    }

    /* Swiper Styles */
    .swiper-container { padding: 30px 0; }
    .swiper-slide { width: 100%; margin-right: 30px; }
/* Swiper Navigation Styles */
.swiper-button-next,
.swiper-button-prev {
  --size: 40px;
  width: var(--size) !important;
  height: var(--size) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  top: 110% !important;
  transform: translateY(-50%) !important;
  margin: 0 10px !important;
  z-index: 10 !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px !important;
  color: #3B82F6 !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Position adjustments */
.swiper-button-prev {
  left: 45% !important;
  padding-right: 2px !important;

}

.swiper-button-next {
  right: 45% !important;
  padding-left: 2px !important;
}

/* Hover Effects */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  transform: translateY(-50%) scale(1.05) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  background: white !important;
}

/* Active State */
.swiper-button-next:active,
.swiper-button-prev:active {
  transform: translateY(-50%) scale(0.95) !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    --size: 36px;
    margin: 0 5px !important;
  }
  
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 16px !important;
  }
  
  /* Hide on smallest screens if needed */
  @media (max-width: 680px) {
    .swiper-button-next,
    .swiper-button-prev {
      display: none !important;
    }
  }
}

/* Pagination Bullets */
.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
  background: #3B82F6 !important;
  transform: scale(1.2) !important;
}

/* Container Padding */
.swiper-container {
  padding: 30px 40px !important;
}

@media (max-width: 768px) {
  .swiper-container {
    padding: 30px 20px !important;
  }
}

    @media (max-width: 768px) {
      .tour-button {
        padding: 6px 18px;
        font-size: 13px;
      }
      .swiper-slide { width: 280px; }
    }
  
    
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    
    
    .heros {
      margin-top: 3%;
      position: relative;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      font-family: "Poppins", sans-serif;
      line-height: 1.6;
      color: var(--text-color);
      background-color: var(--light-color);
      transition: opacity 0.8s ease-in-out;
    }
    
    .slider-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    
    .slides {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1.5s ease-in-out;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    
    .slides.active {
      opacity: 1;
    }
    
    .slide-1 {
      background-image: linear-gradient(rgba(5, 104, 57, 0.5), rgba(0, 0, 0, 0.6)), url("https://www.bwindiugandagorillatrekking.com/wp-content/uploads/2020/03/Animals-in-Bwindi-impenetrable-national-park.jpg");
    }
    
    .slide-2 {
      background-image: linear-gradient(rgba(5, 104, 57, 0.5), rgba(0, 0, 0, 0.6)), url("https://www.kideponationalpark.com/wp-content/uploads/2016/11/kidepooo-1350x500.jpg");
    }
    
    .slide-3 {
      background-image: linear-gradient(rgba(5, 104, 57, 0.5), rgba(0, 0, 0, 0.6)), url("https://dynamic-media-cdn.tripadvisor.com/media/photo-o/17/1d/e0/f2/unwinding-your-self-at.jpg?w=900&h=-1&s=1");
    }

    .slide-4 {
      background-image: linear-gradient(rgba(5, 104, 57, 0.5), rgba(0, 0, 0, 0.6)), url("https://destinationuganda.com/wp-content/uploads/2022/09/kidepo-valley-lion-2000x833.jpg");
    }

    .slide-5 {
      background-image: linear-gradient(rgba(5, 104, 57, 0.5), rgba(0, 0, 0, 0.6)), url("https://chobelodgeuganda.com/wp-content/uploads/2016/11/murchison_falls.jpg");
    }

    .slide-6 {
      background-image: linear-gradient(rgba(5, 104, 57, 0.5), rgba(0, 0, 0, 0.6)), url("https://www.murchisonfallssafaris.com/wp-content/uploads/2018/01/Chobe-Safari-Lodge-1600x600.jpg");
    }
    
    .slides-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40%;
      background: linear-gradient(to top, rgba(5, 104, 57, 0.8), transparent);
      z-index: 1;
    }
    
    .content {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 90%;
      max-width: 1200px;
      z-index: 2;
    }
    
    
    
    @keyframes pulse-logo {
      0% {
        transform: scale(1);
        opacity: 0.2;
      }
      50% {
        transform: scale(1.5);
        opacity: 0.1;
      }
      100% {
        transform: scale(1);
        opacity: 0.2;
      }
    }
    
    .logo-icon {
      width: 70px;
      height: 70px;
      background-color: var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1rem;
      border: 3px solid var(--light-color);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      position: relative;
      z-index: 2;
    }
    
    .logo-text {
      font-family: 'Pacifico', cursive;
      font-weight: 800;
      color: #10a73d;
      letter-spacing: 1px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
      font-size: 6.5rem;
    }
    
    .logo-text span {
      color: var(--primary-color);
    }
    
    .badge {
      position: absolute;
      top: 5px;
      right: -15px;
      background-color: var(--light-color);
      color: var(--dark-color);
      font-family: 'Pacifico', cursive;
      font-size: 0.7rem;
      padding: 5px 10px;
      border-radius: 20px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      border: 2px solid var(--primary);
      z-index: 3;
    }
    
    .h1 {
      font-size: 3.5rem;
      font-weight: 800;
      color: var(--light-color);
      margin-bottom: 1.5rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      line-height: 1.2;
      position: relative;
      display: inline-block;
    }
    
    .h1:after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background-color: var(--primary-color);
      border-radius: 2px;
    }
    
    .highlight {
      color: var(--primary-color);
      position: relative;
      display: inline-block;
    }
    
    
    .cta-container {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      position: relative;
    }
    
    .btns {
      padding: 1.2rem 2.5rem;
      border-radius: var(--radius-md);
      font-weight: 700;
      font-size: 1.1rem;
      transition: all 0.3s ease;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      position: relative;
      overflow: hidden;
    }
    
    .btns-primary {
      background-color: var(--primary-color);
      color: var(--text-dark);
      border: none;
      z-index: 1;
    }
    
    .btns-primary:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: all 0.6s ease;
      z-index: -1;
    }
    
    .btns-primary:hover:before {
      left: 100%;
    }
    
    .btns-primary:hover {
      background-color: var(--primary-light);
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
    
    .btns-outline {
      background-color: var(--white);
      color: var(--light-color);
      border: none;
    }
    
    .btns-outline:hover {
      background-color: var(--color);
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
    
    .category-ribbons {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 1.2rem;
      padding: 2rem 1rem;
      z-index: 3;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
      padding-bottom: 3rem;
    }
    
    .ribbons {
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius-lg);
      font-weight: 600;
      font-size: 1rem;
      color: var(--light-color);
      display: flex;
      align-items: center;
      gap: 0.7rem;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    
    .ribbons:before {
      content: '';
      position: absolute;
      top: -10px;
      left: 0;
      width: 100%;
      height: 10px;
      background-color: rgba(255, 255, 255, 0.2);
      transform: translateX(-100%);
      transition: all 0.5s ease;
    }
    
    .ribbons:hover:before {
      transform: translateX(100%);
    }
    
    .ribbons:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
    
    .safari{
      background-color: var(--ribbon-safari);
      color: var(--dark-color);
    }
    
    .water{
      background-color: var(--ribbon-water);
    }
    
    .cultural{
      background-color: var(--ribbon-cultural);
      color: var(--light-color);
    }
    .wildlife{ 
      background-color: var(--ribbon-wildlife); 
    }
    
    .adventure{ 
      background-color: var(--ribbon-adventure);
      color: var(--text-dark);
    }
    
    .ribbons svg {
      filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
    }
    
    .leaf-pattern {
      position: absolute;
      top: 0;
      right: 0;
      height: 300px;
      width: 300px;
      opacity: 0.2;
      z-index: 1;
    }
    
    .leaf-pattern-left {
      position: absolute;
      bottom: 20%;
      left: 0;
      height: 200px;
      width: 200px;
      opacity: 0.15;
      z-index: 1;
      transform: rotate(180deg);
    }
    
    .pulsating-circle {
      position: absolute;
      width: 25px;
      height: 25px;
      background-color: var(--primary-color);
      border-radius: 50%;
      z-index: 1;
      opacity: 0.8;
    }
    
    .pulse-1 {
      top: 30%;
      right: 20%;
    }
    
    .pulse-2 {
      top: 70%;
      left: 15%;
    }
    
    .pulse-3 {
      top: 25%;
      left: 25%;
    }
    
    .pulsating-circle:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: var(--primary-color);
      opacity: 0.7;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 0.7;
      }
      70% {
        transform: scale(3);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }
    
    .scroll-indicator {
      position: absolute;
      bottom: -5%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 3;
      opacity: 0.8;
    }
    
    .scroll-indicator p {
      color: var(--primary-color);
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
    }
    
    .scroll-arrow {
      width: 30px;
      height: 30px;
      border: 2px solid var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: bounce 2s infinite;
    }
    
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-10px);}
      60% {transform: translateY(-5px);}
    }
    
    
    .safari-features {
      position: absolute;
      top: 35%;
      right: 5%;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    
    .safari-feature {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: rgba(5, 104, 57, 0.85);
      padding: 0.8rem 1rem;
      border-radius: var(--radius-md);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      border-left: 4px solid var(--primary-color);
      transform: translateX(100%);
      animation: slide-in 0.5s forwards;
      animation-delay: calc(var(--i) * 0.2s);
    }
    
    @keyframes slide-in {
      to {
        transform: translateX(0);
      }
    }
    
    .safari-feature svg {
      color: var(--primary-light);
    }
    
    .safari-feature .p {
      margin: 0;
      font-size: 0.9rem;
      color: var(--light-color);
      font-weight: 600;
    }
    
    @media (max-width: 1200px) {
      .h1 {
        font-size: 3.5rem;
      }
      
      .logo-text {
        font-size: 2.5rem;
      }
      
      .safari-features {
        right: 2%;
      }
    }
    
    @media (max-width: 992px) {
      .h1 {
        font-size: 3.5rem;
      }
      
      .p {
        font-size: 1.2rem;
      }
      
      .logo-text {
        font-size: 6.5rem;
      }
      
      .category-ribbons {
        flex-wrap: wrap;
      }
      
      .safari-features {
        display: none;
      }
    }
    
    @media (max-width: 768px) {
      .h1 {
        font-size: 2.5rem;
      }
      
      .p {
        font-size: 1.1rem;
      }
      
      .logo-icon {
        width: 60px;
        height: 60px;
      }
      
      .logo-text {
        font-size: 4rem;
      }
      
      .category-ribbons {
        bottom: 10px;
        gap: 0.8rem;
      }
      
      .ribbons {
        font-size: 0.8rem;
        padding: 0.6rem 1.2rem;
      }
      
      .btns {
        padding: 1rem 2rem;
        font-size: 1rem;
        bottom: 50px;
      }
      
      .badge {
        font-size: 0.6rem;
        padding: 4px 8px;
      }
    }
    
    @media (max-width: 576px) {
      h1 {
        font-size: 2rem;
      }
      
      p {
        font-size: 1rem;
      }
      
      .logo-icon {
        width: 50px;
        height: 50px;
      }
      
      .logo-text {
        font-size: 3.5rem;
      }
      
      .ribbons {
        font-size: 0.7rem;
        padding: 0.5rem 1rem;
      }
      
      .category-ribbons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
      }
      
      .cta-container {
        flex-direction: column;
        gap: 1rem;
      }
      
      .btns {
        width: 100%;
        padding: 0.8rem 1.5rem;
      }
      
      .scroll-indicator {
        display: none;
      }
    }
    
    
    .testimonial-slider {
      position: relative;
    }
    
    .slider-track {
      display: flex;
      gap: 2rem;
      padding: 20px 0;
    }
    
    .testimonial-card {
  flex: 0 0 calc(33.333% - 1.33rem);
  box-sizing: border-box; /* Include padding in width calculation */
  transform: none; /* Remove scaling */
  opacity: 0.9;
  transition: 
    transform 0.8s ease,
    opacity 0.8s ease;
}

.testimonial-card:hover {
  opacity: 1;
  transform: translateY(-5px);
}
    

    
    @media (max-width: 768px) {
      .testimonial-card {
        flex: 0 0 100%;
        min-width: 100%;
      }
    }
    
    .slider-control {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: all 0.3s ease;
      background: white;
      border-radius: 50%;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .slider-control:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    }
    
    .slider-prev {
      left: -20px;
    }
    
    .slider-next {
      right: -20px;
    }
    

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
  }

  .tour-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
      margin-top: 20px;
  }

.tour-card {
  position: relative;
  border-radius: var(--radius-md);
  /* overflow: hidden; */
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 350px;
  background-color: white;
}

/* Hover lift */
.tour-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Animated SVG overlay */
.tour-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  pointer-events: none;

  /* We’ll draw the border using an SVG as a background */
  background: 
    conic-gradient(from 0deg, var(--primary) 0 0) border-box;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;

  /* Hidden stroke at start */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tour-card svg.border-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: scaleX(1); /* makes it draw anticlockwise */
}

.tour-card svg .border-path {
  fill: none;
  stroke: url(#borderGradient);  /* 🎨 Use the gradient defined in SVG */
  stroke-width: 4px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.6s linear;
}

.tour-card:hover svg .border-path {
  stroke-dashoffset: 0; /* animate border drawing */
}



  .tour-image-container {
      width: 100%;
      height: 80%;
      position: relative;
      overflow: hidden;
  }

  .tour-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
  }

  .tour-card:hover .tour-image {
      transform: scale(1.08);
  }

  /* Modern ribbon style */
  .ribbon {
      --f: 0.5em;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      position: absolute;
      position: absolute;
  top: 0;
  left: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
      z-index: 20;
      background-color: var(--ribbon-wildlife);
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }

  /* Specific ribbon colors */
  .ribbon-wildlife {
      background-color: var(--ribbon-wildlife);
  }

  .ribbon-safari {
      background-color: var(--ribbon-safari);
  }

  .ribbon-water {
      background-color: var(--ribbon-water);
  }

  .ribbon-adventure {
      background-color: var(--ribbon-adventure);
  }

  .ribbon-cultural {
      background-color: var(--ribbon-cultural);
  }

  .tour-price {
      font-size: 28px;
  font-weight: bold;
  color: #070707;

  --f: .5em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */
  
  position: absolute;
  top: 20px;
  right: calc(-1*var(--f));
  padding-inline: .25em;
  line-height: 1.8;
  background: #faab00;
  z-index: 20;
  border-bottom: var(--f) solid #0005;
  border-left: var(--r) solid #0000;
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  }


  .original-price {
      text-decoration: line-through;
      opacity: 0.7;
      margin-right: 8px;
      font-size: 14px;
  }

  .current-price {
      font-size: 18px;
  }

  .tour-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 20px;
      background: rgba(0, 0, 0, 0.7);
      color: var(--text-light);
      font-weight: bold;
      font-size: 23px;
      line-height: 1.4;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  }

  .tour-card:hover .tour-title {
      opacity: 1;
  }

  /* Gradient hover line */
  .hover-line {
      position: absolute;
      bottom: 20%;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(to right, var(--ribbon-wildlife), var(--ribbon-adventure), var(--ribbon-cultural));
      transform: scaleX(0);
      transition: transform 0.3s ease;
      transform-origin: left;
  }

  .tour-card:hover .hover-line {
      transform: scaleX(1);
  }

  .card-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
  }

  .book-btn {
      background-color: var(--white);
      color: var(--text-light);
      border: none;
      padding: 10px 25px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-weight: bold;
      transition: all 0.2s ease;
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  .book-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }

  .stars{
    left: 80%;
  }

  h1 {
      text-align: center;
      margin-bottom: 30px;
      color: var(--white);
      font-size: 32px;
      position: relative;
      padding-bottom: 15px;
  }


  .gallery-container {
    position: relative;
    max-width: 100%;
    width: 100%;
    height: 80vh;
    min-height: 500px;
    margin: 2rem auto;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-radius: 8px;
}

.gallery-title {
    text-align: center;
    margin: 2rem 0;
    color: var(--primary-color);
    font-size: 2.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.slits-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.slit {
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: flex var(--transition-speeds) ease;
    flex: 1;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.slit:hover, .slit.active {
    flex: 8;
}

.slit:not(:hover):not(.active) {
    flex: 0.5;
}

.slit-image {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: translateX(-25%);
    transition: transform var(--transition-speeds) ease;
}

.slit:hover .slit-image, .slit.active .slit-image {
    transform: translateX(0);
}

.slit-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-speeds) ease;
    pointer-events: none;
}

.slit:hover .slit-content, .slit.active .slit-content {
    opacity: 1;
    transform: translateY(0);
}

.slit-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.slit-description {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}



/* Lightbox overlay */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85); /* slightly transparent dark overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

/* Lightbox content */
.lightbox-content {
    position: relative;
    width: 95%;
    max-width: 1000px;
    max-height: 90%;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.5s ease;
}

.lightbox.active .lightbox-content {
    transform: scale(1);
}

/* Image styling */
.lightbox-image {
    width: 100%;
    max-height: 55vh;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

/* Info panel */
.lightbox-info {
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lightbox-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2c3e50;
}

.lightbox-description {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.6;
}

.lightbox-cta {
    align-self: flex-start;
    padding: 12px 25px;
    font-size: 1.2rem;
    font-weight: 600;
    background: var(--accent-color); /* modern accent color */
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.lightbox-cta:hover {
    background-color: var(--color);
    transform: translateY(-3px);
}

/* Close button */
.lightbox-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background-color: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
}

.lightbox-close:hover {
    background-color: rgba(255,255,255,0.45);
    transform: rotate(90deg);
}

.lightbox-close::before, .lightbox-close::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 2.5px;
    background-color: #fff;
}

.lightbox-close::before {
    transform: rotate(45deg);
}

.lightbox-close::after {
    transform: rotate(-45deg);
}


/* Navigation controls */
.gallery-nav {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dot.active {
    background-color: var(--primary);
    transform: scale(1.2);
}

/* Progress bar */
.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0;
    background-color: var(--primary);
    z-index: 5;
    transition: width 0.1s linear;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .gallery-container {
        height: 70vh;
    }
    
    .slits-container {
        flex-direction: row; /* Keep horizontal layout on mobile */
    }
    
    .slit {
        height: 100%;
        width: auto;
    }
    
    .slit-image {
        transform: translateX(-25%); /* Keep horizontal transform on mobile */
    }
    
    .slit:hover .slit-image, .slit.active .slit-image {
        transform: translateX(0);
    }
    
    .gallery-title {
        font-size: 2rem;
    }
    
    .slit-title {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 480px) {
    .gallery-container {
        height: 60vh;
        min-height: 400px;
        margin: 1rem;
    }
    
    .gallery-title {
        font-size: 1.5rem;
        margin: 1rem 0;
    }
    
    .slit-content {
        padding: 10px;
    }
    
    .slit-title {
        font-size: 1rem;
    }

    .slit-description {
        font-size: 0.8rem;
    }
    
}



        /* Custom Scrollbar Hidden */
        .modal-content {
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE and Edge */
      }

      .modal-content::-webkit-scrollbar {
          display: none; /* Chrome, Safari, Opera */
      }

      .country-search::-webkit-scrollbar {
          display: none;
      }

      .country-search {
          scrollbar-width: none;
          -ms-overflow-style: none;
      }

      /* Modal Styles */
      .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          backdrop-filter: blur(5px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
          padding: 20px;
      }

      .modal-overlay.active {
          opacity: 1;
          visibility: visible;
      }

      .modal-content {
          background: white;
          border-radius: 20px;
          width: 100%;
          max-width: 700px;
          max-height: 90vh;
          overflow-y: auto;
          position: relative;
          transform: scale(0.7) translateY(50px);
          transition: all 0.3s ease;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
      }

      .modal-overlay.active .modal-content {
          transform: scale(1) translateY(0);
      }

      .modal-header {
          background: linear-gradient(135deg, var(--color) 0%, #078a4a 100%);
          color: var(--text-light);
          padding: 30px;
          border-radius: 20px 20px 0 0;
          position: relative;
          overflow: hidden;
      }

      .modal-header::before {
          content: '';
          position: absolute;
          top: -50%;
          right: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
          animation: shimmer 3s infinite;
      }

      @keyframes shimmer {
          0%, 100% { transform: rotate(0deg); }
          50% { transform: rotate(180deg); }
      }

      .modal-header h2 {
          font-size: 1.8rem;
          margin-bottom: 5px;
          position: relative;
          z-index: 1;
      }

      .modal-header p {
          opacity: 0.9;
          position: relative;
          z-index: 1;
      }

      .close-btn {
          position: absolute;
          top: 20px;
          right: 25px;
          background: rgba(255, 255, 255, 0.2);
          border: none;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          color: var(--text-light);
          font-size: 1.5rem;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2;
      }

      .close-btn:hover {
          background: rgba(255, 255, 255, 0.3);
          transform: rotate(90deg);
      }

      .modal-body {
          padding: 40px;
      }

      .form-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 25px;
          margin-bottom: 25px;
      }

      .form-group {
          display: flex;
          flex-direction: column;
          position: relative;
      }

      .form-group.full-width {
          grid-column: 1 / -1;
      }

      .form-group label {
          color: var(--text-dark);
          font-weight: 600;
          margin-bottom: 8px;
          font-size: 0.95rem;
      }

      .form-group label .required {
          color: #e74c3c;
      }

      .form-group label i {
          margin-right: 5px;
          color: var(--color);
      }

      .form-control {
          padding: 15px;
          border: 2px solid #e1e8ed;
          border-radius: 10px;
          font-size: 1rem;
          transition: all 0.3s ease;
          background: #fafafa;
      }

      .form-control:focus {
          outline: none;
          border-color: var(--primary-color);
          background: white;
          box-shadow: 0 0 0 3px rgba(255, 206, 0, 0.1);
      }

      .form-control:hover {
          border-color: var(--color);
      }

      select.form-control {
          cursor: pointer;
      }

      textarea.form-control {
          resize: vertical;
          min-height: 100px;
      }

      /* Custom Country Search Dropdown */
      .country-dropdown {
          position: relative;
      }

      .country-search {
          width: 100%;
          padding: 15px;
          border: 2px solid #e1e8ed;
          border-radius: 10px;
          font-size: 1rem;
          transition: all 0.3s ease;
          background: #fafafa;
          cursor: pointer;
      }

      .country-search:focus {
          outline: none;
          border-color: var(--primary-color);
          background: white;
          box-shadow: 0 0 0 3px rgba(255, 206, 0, 0.1);
      }

      .country-list {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: white;
          border: 2px solid #e1e8ed;
          border-top: none;
          border-radius: 0 0 10px 10px;
          max-height: 200px;
          overflow-y: auto;
          z-index: 1000;
          display: none;
      }

      .country-list.active {
          display: block;
      }

      .country-item {
          padding: 12px 15px;
          cursor: pointer;
          transition: background 0.2s ease;
          border-bottom: 1px solid #f0f0f0;
      }

      .country-item:hover {
          background: var(--bg-light);
      }

      .country-item:last-child {
          border-bottom: none;
      }

      .country-item.selected {
          background: var(--primary-color);
          color: var(--text-dark);
      }

      .submit-btn {
          background: linear-gradient(135deg, var(--color) 0%, #078a4a 100%);
          color: var(--text-light);
          border: none;
          padding: 18px 40px;
          font-size: 1.1rem;
          font-weight: 600;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.3s ease;
          width: 100%;
          position: relative;
          overflow: hidden;
      }

      .submit-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 25px rgba(5, 104, 57, 0.3);
      }

      .submit-btn:disabled {
          opacity: 0.7;
          cursor: not-allowed;
          transform: none;
      }

      .loading-spinner {
          display: none;
          width: 20px;
          height: 20px;
          border: 2px solid transparent;
          border-top: 2px solid var(--text-light);
          border-radius: 50%;
          animation: spin 1s linear infinite;
          margin-right: 10px;
      }

      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }

      .whatsapp-fallback {
          margin-top: 20px;
          padding: 15px;
          background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
          border-radius: 15px;
          text-align: center;
      }

      .whatsapp-fallback p {
          color: white;
          margin-bottom: 10px;
          font-weight: 500;
      }

      .whatsapp-btn {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 25px;
          cursor: pointer;
          font-weight: 600;
          transition: all 0.3s ease;
      }

      .whatsapp-btn:hover {
          background: rgba(255, 255, 255, 0.3);
          transform: translateY(-1px);
      }

      .success-message {
          display: none;
          text-align: center;
          padding: 40px;
          color: var(--color);
      }

      .success-message .checkmark {
          font-size: 4rem;
          color: var(--primary-color);
          margin-bottom: 20px;
          animation: bounce 0.6s ease;
      }

      @keyframes bounce {
          0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
          40% { transform: translateY(-10px); }
          60% { transform: translateY(-5px); }
      }

      /* Responsive Design */
      @media (max-width: 768px) {

          .form-grid {
              grid-template-columns: 1fr;
              gap: 20px;
          }

          .modal-content {
              margin: 10px;
              max-height: 85vh;
          }

          .modal-header {
              padding: 25px;
          }

          .modal-body {
              padding: 25px;
          }

          .book-now-btn {
              padding: 15px 30px;
              font-size: 1.1rem;
          }
      }

      @media (max-width: 480px) {

          .modal-header h2 {
              font-size: 1.5rem;
          }

          .form-control {
              padding: 12px;
          }

          .submit-btn {
              padding: 15px 30px;
          }
      }



            /* Redesigned sidebar button container with center panel positioning */
        .sidebar-button-container {
            position: fixed;
            right: 0;
            top: 70%;
            transform: translateY(-50%);
            z-index: 1000;
        }

        /* Modern professional button design */
        .sidebar-button {
            background: linear-gradient(135deg, #cc7f0c 0%, #db4905 100%);
            color: white;
            padding: 18px 25px;
            border: none;
            border-radius: 30px 0 0 30px;
            cursor: pointer;
            font-weight: 600;
            font-size: 15px;
            box-shadow: 0 8px 25px rgba(44, 90, 160, 0.3);
            transition: all 0.4s ease;
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 320px;
            position: relative;
            border-right: 4px solid #0bf52a;
        }

        .sidebar-button:hover {
            opacity: 0;
            transform: translateX(20px) translateY(-50%);
        }

        /* Professional logo with SafariBookings colors */
        .safari-logo {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: white;
            font-weight: bold;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
        }

        /* Centered hover panel with professional SafariBookings design */
        .hover-panel {
            position: fixed;
            left: 27%;
            top: -120%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            padding: 0;
            width: 480px;
            max-height: 900px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
            overflow: hidden;
            border: 1px solid #e5e7eb;
        }

        .sidebar-button-container:hover .hover-panel {
            opacity: 1;
            visibility: visible;
        }
        .safari-logo img{
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }
        .partner-text {
            display: inline;
            }
        /* Professional header section */
        .panel-headers {
            background: linear-gradient(135deg, #f58e07 0%, #db5314 100%);
            color: white;
            padding: 25px;
            text-align: center;
            position: relative;
        }

        .panel-headers h3 {
            font-size: 25px;
            font-weight: 900;
            margin-bottom: 8px;
        }

        .panel-headers p {
            font-size: 14px;
            opacity: 0.9;
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }

        .close-btn:hover {
            opacity: 1;
        }

        /* Trust indicators section */
        .trust-section {
            padding: 20px 25px;
            background: #f8fafc;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .rating-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .stars {
            color: #f59e0b;
            font-size: 18px;
        }

        .rating-text {
            font-weight: 600;
            color: #1f2937;
        }

        .verified-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            background: #dcfce7;
            color: #166534;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        /* Professional reviews section matching SafariBookings design */
        .reviews-section {
            padding: 25px;
            max-height: 260px;
            overflow-y: auto;
        }

        .review {
            margin-bottom: 20px;
            padding: 20px;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .review-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .reviewer-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 16px;
        }

        .reviewer-info {
            flex: 1;
        }

        .reviewer-name {
            font-weight: 600;
            color: #1f2937;
            font-size: 14px;
        }

        .reviewer-details {
            font-size: 12px;
            color: #6b7280;
            margin-top: 2px;
        }

        .review-rating {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }

        .review-stars {
            color: #f59e0b;
            font-size: 14px;
        }

        .review-score {
            font-weight: 600;
            color: #1f2937;
            font-size: 14px;
        }

        .review-text {
            color: #374151;
            line-height: 1.6;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .review-meta {
            font-size: 11px;
            color: #9ca3af;
            border-top: 1px solid #f3f4f6;
            padding-top: 8px;
        }

        /* Professional action section */
        .action-section {
            max-height: 200px;
            padding: 20px 15px;
            background: #f8fafc;
            border-top: 1px solid #e5e7eb;
            text-align: center;
        }

        .review-count {
            font-size: 13px;
            color: #6b7280;
            margin-bottom: 15px;
        }

        .action-button {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
        }

        .action-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
        }

        /* Custom scrollbar for reviews */
        .reviews-section::-webkit-scrollbar {
            width: 6px;
        }

        .reviews-section::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }

        .reviews-section::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }

        .reviews-section::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .sidebar-button {
                min-width: 80px;
                font-size: 14px;
                padding: 15px 20px;
            }
            
            .hover-panel {
                margin-left: 56%;
                width: 80vw;
                max-width: 350px;
                max-height: 70vh;
            }
              .partner-text {
                display: none;
            }
        
        }